<template>
  <div class="app-container">


    <el-form inline>
      <el-form-item label="姓名:">
        <el-input
          v-model="form.xm"
          style="width: 20vw"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="类型:">
        <el-select v-model="form.lx" placeholder="请选择">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

     <!-- <el-form-item label="类型:">
        <el-input
          v-model="form.lx"
          style="width: 20vw"
          placeholder="请输入类型"
        ></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" type="primary" @click="refresh">重置</el-button>
      </el-form-item>

      <br>
      <el-form-item>
        <el-button icon="el-icon-plus" type="success" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="lx"
      label="类型"
      width="100">
    </el-table-column>
    <el-table-column
      prop="isJwsr"
      label="输入类型"
      :formatter="jwsrFormatter"
      width="100">
    </el-table-column>
    <el-table-column
      prop="xm"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="xb"
      label="姓别"
      width="100">
    </el-table-column>
    <el-table-column
      prop="nl"
      label="年龄"
      width="100">
    </el-table-column>
    <el-table-column
      prop="sfzh"
      label="身份证号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="sjhm"
      label="手机号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="xzz"
      label="地址">
    </el-table-column>
    <el-table-column
      prop="CreateTime"
      label="创建时间"
      :formatter="dateFormatter"
      width="180">
    </el-table-column>

    <el-table-column
      prop="UpdateTime"
      label="更新时间"
      :formatter="updateTimeFormatter"
      width="180">
    </el-table-column>


    <el-table-column label="操作" width="180">
      <template slot-scope="scope">
         <el-button icon="el-icon-edit" size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
        <el-button icon="el-icon-delete" size="mini" type="danger" plain @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px;text-align: center;">
        <el-pagination
          :current-page="form.PageIndex"
          :page-sizes="[50, 75, 100, 200,500]"
          :page-size="form.PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="form.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <el-dialog
        title="核酸阳性人员个案情况"
        :visible.sync="dialogVisible"
        width="65%"
        :close-on-click-modal="false"
        style="margin-top: -12vh;"
      >
      <zz v-if="dialogVisible" :dialogVisible_from="dialogVisible_from" @onCancel="onCancels" @onUpdateTime="onUpdateTime" />
      </el-dialog>
  </div>
</template>

<script>
import { queryZz,addZz,delZz } from "@/api/user"
import zz from "./addZz.vue"
import moment from '@/utils/moment'
export default {
  components:{zz},
  data() {
    return {
      dialogVisible_from: {},
      dialogVisible: false,
      form:{
        PageIndex: 1,
        PageSize: 50,
        total: 0,
        xm: '',
        lx: ''
      },
      tableData: [],
      options: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '初筛阳性(待转归)',
          value: '初筛阳性(待转归)'
        },
        {
          label: '已确诊',
          value: '已确诊'
        },
        {
          label: '无症状感染',
          value: '无症状感染'
        }
      ],
    }
  },
  created(){
    this.loadData()
  },
  methods: {
    refresh(){
      this.form.PageIndex = 1
      this.form.xm = ''
      this.form.lx = ''
       this.loadData()
    },
    search(){
      this.form.PageIndex = 1
      this.loadData()
    },
    handleEdit(val) {
      this.dialogVisible_from = val
      this.dialogVisible = true
    },
    loadData() {
      queryZz(this.form).then(res =>{
        if(res.IsSuccess){
          this.tableData = res.Data
          this.form.total = res.Total
        }else{
          this.$message('删除失败！')
        }
      })
    },
    handleSizeChange(val) {
      this.form.PageSize = val
      this.loadData()
    },
    handleCurrentChange(val) {
      this.form.PageIndex = val
      this.loadData()
    },
    handleDelete(val){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          delZz({"Id":val.Id}).then(res =>{
            if(res.IsSuccess){
              this.$message('删除成功')

              this.loadData()
            }else{
              this.$message('删除失败！')
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


    },
    handleAdd(){
      this.dialogVisible_from = {
        Id: ''
      }
      this.dialogVisible = true
    },
    onCancels() {
      this.dialogVisible = false
      this.loadData()
    },
    onUpdateTime(){
      this.dialogVisible = false
      this.loadData()
    },
    dateFormatter(row) {
     return moment(new Date(row.CreateTime)).format('YYYY-MM-DD HH:mm')
    },
    updateTimeFormatter(row) {
     return moment(new Date(row.UpdateTime)).format('YYYY-MM-DD HH:mm')
    },
    jwsrFormatter(row){
      const opt={
        0:'本土',
        1:'境外'
      }
      console.log(row);
      return opt[row.isJwSr]
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>
